<template>
	<main class="todo">
		<el-tabs type="border-card" width="100%">
		  <el-tab-pane label="个人任务">
		  	<div class="todoTimeLineBox">
		  		<div class="block">
				  <el-timeline>
				    <el-timeline-item v-for="(item,index) in personalTaskList" :timestamp="`第${item.taskNum}个任务`" placement="top">
				      <el-card>
				        <h4>{{item.tcontent}}</h4>
				        <p>任务于{{item.tstarttime}} 开始，在{{item.tendtime}}，请尽快完成</p>
				        <p class="changeBtnBox">
				        	<el-button type="info" round v-show="0==item.tstatus" title="点击提交任务">提交任务</el-button>
				        	<el-button round v-show="1==item.tstatus" title="提交任务正在审核中">待审核</el-button>
				        	<el-button type="danger" round v-show="0==item.tstatus" @click="checkReason" title="点击即可查看任务未通过原因">任务未通过</el-button>
				        	<el-button type="success" icon="el-icon-check" circle v-show="2==item.tstatus" title="任务已完成"></el-button>
				        </p>
				      </el-card>
				    </el-timeline-item>
				  </el-timeline>
				</div>
		  	</div>
		  	<!--添加任务-->
		    <el-button type="primary" icon="el-icon-plus" style="margin-left: 40px;" @click="dialogFormVisible = true" title="点击即可创建新任务">添加任务</el-button>
		    <el-dialog title="添加任务" :visible.sync="dialogFormVisible">
			  <el-form :model="form">
			    <el-form-item label="任务内容：" :label-width="formLabelWidth">
			      <el-input v-model="form.name" autocomplete="off" placeholder="请输入需要添加的任务内容"></el-input>
			    </el-form-item>
			    <el-form-item label="结束时间：" :label-width="formLabelWidth">
			      <el-input v-model="form.name" autocomplete="off"  placeholder="请输入任务的结束时间"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			  </div>
			</el-dialog>
		  </el-tab-pane>
		  <!--小组成员任务查看-->
		  <el-tab-pane label="小组成员任务">
		  	<el-table :data="groupMenberTaskList" style="width: 100%">
			    <el-table-column label="姓名"  prop="name" width="140">
			    </el-table-column>
			    <el-table-column label="任务开始时间" prop="tstarttime" width="180">
			    </el-table-column>
			    <el-table-column label="任务结束时间"  prop="tendtime" width="180">
			    </el-table-column>
			    <el-table-column  label="任务内容"  prop="tcontent">
			    </el-table-column>
			    <el-table-column  align="right" prop="tstatus">
				    <template slot-scope="scope">
				        <el-button  size="mini" v-show="0==scope.row.tstatus" type="danger" @click="handleEdit(scope.$index, scope.row)">未通过</el-button>
				        <el-button  size="mini" v-show="1==scope.row.tstatus" type="info"  @click="handleAccept(scope.$index, scope.row)">通过审核</el-button>
				        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"align="left">
						    <span>确定要通过审核吗</span>
						    <span slot="footer" class="dialog-footer">
						    	<el-button @click="dialogVisible = false">取 消</el-button>
						    	<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
						    </span>
						</el-dialog>
				        <el-button  size="mini" v-show="1==scope.row.tstatus" type="warning"  @click="handleRefuse(scope.$index, scope.row)">驳回审核</el-button>
						<!--描述驳回原因-->
				        <el-dialog title="请填写驳回原因" :center="Rtrue" :visible.sync="RdialogFormVisible">
						  <textarea  rows="10" cols="94" placeholder="请在此输入不同意组员完成任务的原因，原因不可为空" style="padding: 10px;box-sizing: border-box;outline: none;"></textarea>
						  <div slot="footer" class="dialog-footer">
						    <el-button @click="RdialogFormVisible = false">取 消</el-button>
						    <el-button type="primary" @click="RdialogFormVisible = false">确 定</el-button>
						  </div>
						</el-dialog>
				        <el-button  size="mini" v-show="2==scope.row.tstatus"  type="success" icon="el-icon-check" circle  @click="handleDelete(scope.$index, scope.row)"></el-button>
				    </template>
			    </el-table-column>
		    </el-table>
		  </el-tab-pane>

		  
		</el-tabs>
	</main>
</template>

<script>
	export default {
    data() {
    	return {
        	personalTaskList:[
        		{
        			taskNum:1,
        			tstarttime:"2018/4/12",
        			tendtime:"2018/4/12",
        			tcontent:"任务内容",
        			tstatus:0
        		},
        		{
        			taskNum:2,
        			tstarttime:"2018/4/12",
        			tendtime:"2018/4/12",
        			tcontent:"任务内容",
        			tstatus:1
        		},
        		{
        			taskNum:3,
        			tstarttime:"2018/4/12",
        			tendtime:"2018/4/12",
        			tcontent:"任务内容",
        			tstatus:2
        		}
        	],
        	groupMenberTaskList: [
	        	{
        			taskNum:1,
        			tstarttime:"2018/4/12",
        			tendtime:"2018/4/12",
        			tcontent:"任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容",
        			tstatus:0,
		          	name: '王小虎',
        		},
        		{
        			taskNum:1,
        			tstarttime:"2018/4/12",
        			tendtime:"2018/4/12",
        			tcontent:"任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容",
        			tstatus:1,
		          	name: '王小虎2',
        		},
        		{
        			taskNum:1,
        			tstarttime:"2018/4/12",
        			tendtime:"2018/4/12",
        			tcontent:"任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容任务内容",
        			tstatus:2,
		          	name: '王小虎3',
        		}
	        ],
	        dialogTableVisible: false,
	        dialogFormVisible: false,
	        form: {
	          name: '',
	          region: '',
	          date1: '',
	          date2: '',
	          delivery: false,
	          type: [],
	          resource: '',
	          desc: ''
	        },
	        formLabelWidth: '120px',
	        RformLabelWidth: '180px',
	        RdialogTableVisible: false,
	        RdialogFormVisible: false,
	        Rtrue:true,
	        dialogVisible:false
      }
    },
    methods: {
	    handleEdit(index, row) {
	        console.log(index, row.tstatus);
	    },
	    handleAccept(index, row) {
	    	this.dialogVisible = true;
	        console.log(index, row.tstatus);
	    },
	    handleRefuse(index, row) {
	        this.RdialogFormVisible = true
	    },
	    checkReason() {
	        this.$alert('无', '任务未通过原因', {
	          confirmButtonText: '确定'
	        });
      }
    }
  }
</script>

<style>
	.todo{
		width:95%;
	}
	.changeBtnBox{
		float: right;
		margin-top: -38px;
	}
</style>